<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'危化品车流量排行TOP10'"></contentTitle>
        <div class="layChart" ref="whpcllphRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain" style="justify-content: left">
          <el-date-picker
              class="custom-date-picker"
              v-model="today"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const today = ref([new Date(),new Date()]);
const search = function (){
  console.log(today.value);
  refreshData()
}

const whpcllph_x = ref([])
const whpcllph_y_1 = ref([0])

const whpcllphRef = ref();
const whpcllphOpt = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '15%',
    left: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick:{
      show: false
    },
    axisLabel: {
      interval:0,
      rotate: 25,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    },
    data: whpcllph_x.value
  },
  yAxis: {
    type: 'value',
    name: "辆",
    nameTextStyle: {
      color: "#FFF",
      nameLocation: "end",
      padding:[0,0,0,-15]
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(39,163,212,0.52)',
        type: 'dashed',
      }
    },
    axisLabel: {
      interval:0,
      textStyle: {
        color: 'white',
        fontSize: 12
      }
    }
  },
  series: [
    {
      data: whpcllph_y_1.value,
      type: 'bar',
      barWidth: 14,
      itemStyle: {
        borderRadius: [10, 10, 0, 0], // 这里设置圆角
        color: new chart.graphic.LinearGradient(
            0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
            [
              {offset: 0, color: '#FC497B'},   // 0% 处的颜色
              {offset: 1, color: 'rgba(136,243,241,0)'}   // 100% 处的颜色
            ]
        )
      }
    }
  ]
});
let whpcllphChart
onMounted(() => {
  whpcllphChart = drawLine(whpcllphRef.value,whpcllphOpt.value);
  refreshData()
})


async function refreshData() {
  let startdate,enddate
  //手动输入
  if(today.value[0].$d){
    startdate = formatDate(today.value[0].$d)
    enddate = formatDate(today.value[1].$d)
  }else{
    startdate = formatDate(today.value[0])
    enddate = formatDate(today.value[1])
  }
  const params = {
    page: 1,
    limit: 10,
    startdate: startdate,
    enddate: enddate
  }

  whpcllph_x.value = []
  whpcllph_y_1.value = []
  const result = await ajaxRequest('post', 'getFwqwhpclph', params)
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      whpcllph_x.value.push(item.compname)
      whpcllph_y_1.value.push(item.cnt)
    })
  }
  whpcllphOpt.value.xAxis.data = whpcllph_x.value
  whpcllphOpt.value.series[0].data = whpcllph_y_1.value
  whpcllphChart.setOption(whpcllphOpt.value)
}

function formatDate(date) {
  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
  var year = date.getFullYear();
  var month = padZero(date.getMonth() + 1);
  var day = padZero(date.getDate());
  return `${year}-${month}-${day}`;
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:18vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>